refactoring

5 files changed, 48 insertions, 27 deletions

diff --git a/src/routes/[username]/settings/+page.server.js b/src/routes/[username]/settings/+page.server.js
new file mode 100644
index 00000000..49019e9e
--- /dev/null
+++ b/src/routes/[username]/settings/+page.server.js
@@ -0,0 +1,18 @@
+import { invalid } from '@sveltejs/kit';
+import { auth, get, post } from '$lib/utils';
+
+export const actions = {
+	default: async ({ cookies, request }) => {
+		let user = {
+			...(await get('/me', auth(cookies))),
+			...Object.fromEntries(await request.formData())
+		};
+		try {
+			await post(`/user`, user, auth(cookies));
+		} catch (e) {
+			return invalid(400, { message: e.message });
+		}
+
+		return { success: true };
+	}
+};
diff --git a/src/routes/[username]/settings/+page.svelte b/src/routes/[username]/settings/+page.svelte
index 410ed1bf..91031e41 100644
--- a/src/routes/[username]/settings/+page.svelte
+++ b/src/routes/[username]/settings/+page.svelte
@@ -1,14 +1,21 @@
 <script>
+	import { enhance } from '$app/forms';
 	import Account from './_account.svelte';
 	import Pos from './_pos.svelte';
 	import Security from './_security.svelte';
 
 	import { Icon } from '$comp';
 	import { t } from '$lib/translations';
-	import { failure, success, put } from '$lib/utils';
-	import { user, avatarUpload, bannerUpload } from '$lib/store';
+	import { failure, success } from '$lib/utils';
+	import { avatarUpload, bannerUpload } from '$lib/store';
 	import { upload } from '$lib/upload';
 
+	export let data;
+
+	let { user, rates, token } = data;
+	$: update(data);
+	let update = () => ({ user, rates } = data);
+
 	let tab = 'account';
 
 	let tabs = [
@@ -21,12 +28,12 @@
 
 	let save = async () => {
 		try {
-			await put('/user', $user);
+			console.log('Uploading files...');
 			if ($avatarUpload) {
-				await upload($avatarUpload.file, $avatarUpload.type, $avatarUpload.progress);
+				await upload($avatarUpload.file, $avatarUpload.type, $avatarUpload.progress, token);
 			}
 			if ($bannerUpload) {
-				await upload($bannerUpload.file, $bannerUpload.type, $bannerUpload.progress);
+				await upload($bannerUpload.file, $bannerUpload.type, $bannerUpload.progress, token);
 			}
 			success('Settings saved');
 		} catch (e) {
@@ -35,7 +42,7 @@
 	};
 </script>
 
-<form on:submit|preventDefault={save} class="mb-[154px]">
+<form method="POST" class="mb-[154px]" use:enhance on:submit={save}>
 	<div class="mt-24 mb-20 px-3 md:px-0 w-full md:w-[400px] mx-auto space-y-8">
 		<h1 class="text-center text-3xl md:text-4xl font-semibold mb-10">
 			{$t('user.settings.header')}
@@ -51,7 +58,7 @@
 			{/each}
 		</div>
 
-		<svelte:component this={comp} />
+		<svelte:component this={comp} {user} {rates} />
 	</div>
 	<div
 		class="z-10 fixed bottom-0 bg-white shadow border-t w-full flex justify-center items-center py-3"
diff --git a/src/routes/[username]/settings/_account.svelte b/src/routes/[username]/settings/_account.svelte
index 8a20df43..918a01bf 100644
--- a/src/routes/[username]/settings/_account.svelte
+++ b/src/routes/[username]/settings/_account.svelte
@@ -5,6 +5,8 @@
 	import { t } from '$lib/translations';
 	import { upload } from '$lib/upload';
 
+	export let user;
+
 	let selectedTheme = 1;
 	let revealPassword = false;
 	let password;
@@ -69,14 +71,15 @@
 <div>
 	<label for="username" class="font-bold mb-1 block">{$t('user.settings.username')}</label>
 	<input disabled type="text" name="username" bind:value={user.username} />
+	<input type="hidden" name="username" bind:value={user.username} />
 </div>
 
 <div class="relative">
 	<label for="password" class="block font-bold block mb-1">{$t('user.settings.newPassword')}</label>
 	{#if revealPassword}
-		<input type="text" bind:value={password} />
+		<input name="password" type="text" bind:value={password} />
 	{:else}
-		<input type="password" bind:value={password} />
+		<input name="password" type="password" bind:value={password} />
 	{/if}
 	<button
 		type="button"
diff --git a/src/routes/[username]/settings/_pos.svelte b/src/routes/[username]/settings/_pos.svelte
index edf54d91..cf4a5ece 100644
--- a/src/routes/[username]/settings/_pos.svelte
+++ b/src/routes/[username]/settings/_pos.svelte
@@ -1,26 +1,18 @@
 <script>
 	import { Icon, Toggle } from '$comp';
 	import { t } from '$lib/translations';
-	import { success, failure, put } from '$lib/utils';
+	import { success, failure } from '$lib/utils';
 
-	const fiats = Object.keys($rates);
+	export let rates, user;
 
-	const updateFiat = async (e) => {
-		try {
-			$user.currency = e.target.value;
-			let r = await put('/' + $user.username, { user: $user });
-			success('Local currency updated');
-		} catch (e) {
-			failure(e.message);
-		}
-	};
+	const fiats = Object.keys(rates);
 </script>
 
 <div>
 	<label for="currency" class="font-bold block mb-1">{$t('user.settings.localCurrency')}</label>
-	<select name="currency" on:change={updateFiat} class="select-styles block py-3 w-full">
+	<select name="currency" class="select-styles block py-3 w-full">
 		{#each fiats as fiat}
-			<option value={fiat} selected={$user.currency === fiat}>{fiat}</option>
+			<option value={fiat} selected={user.currency === fiat}>{fiat}</option>
 		{/each}
 	</select>
 </div>
@@ -28,7 +20,7 @@
 <!-- TODO
 <div>
 	<label for="unit" class="font-bold block mb-1">{$t('user.settings.btcUnit')}</label>
-	<select disabled name="unit" class="select-styles block py-3 w-full" bind:value={$user.unit}>
+	<select disabled name="unit" class="select-styles block py-3 w-full" bind:value={user.unit}>
 		<option value="SAT">{$t('user.settings.satoshis')} (SAT)</option>
 		<option value="BTC">{$t('user.settings.bitcoin')} (BTC)</option>
 	</select>
diff --git a/src/routes/[username]/settings/_security.svelte b/src/routes/[username]/settings/_security.svelte
index 3c0009dc..2a490aa4 100644
--- a/src/routes/[username]/settings/_security.svelte
+++ b/src/routes/[username]/settings/_security.svelte
@@ -3,8 +3,9 @@
 	import { t } from '$lib/translations';
 	import { Icon, Qr } from '$comp';
 	import { Pincode, PincodeInput } from 'svelte-pincode';
-	import { user } from '$lib/store';
-	import { put, success, failure } from '$lib/utils';
+	import { post, success, failure } from '$lib/utils';
+
+	export let user;
 
 	let settingPin, setting2fa, disabling2fa;
 
@@ -30,7 +31,7 @@
 	let enable2fa = async (twoFa) => {
 		try {
 			if (setting2fa && token.length === 6) {
-				await put('/enable2fa', { token });
+				await post('/enable2fa', { token });
 				success('2FA enabled');
 				user.twofa = 1;
 				toggleEnabling();
@@ -44,7 +45,7 @@
 	let disable2fa = async () => {
 		try {
 			if (disabling2fa && token.length === 6) {
-				await put('/disable2fa', { token });
+				await post('/disable2fa', { token });
 				success('2FA disabled');
 				user.twofa = 0;
 				toggleDisabling();